<template>
  <div class="app-container">
    <div class="operator-container">
      <el-button icon="el-icon-plus" type="primary" @click="clickToVersionUpdate" class="operator-item"  size="small">编辑安卓版本</el-button>
    </div>
    <table-list :data="versionList">
      <template slot="columns">
        <el-table-column label="客户端类型" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.client }}
          </template>
        </el-table-column>
        <el-table-column label="应用名" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="版本ID" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.versionId }}
          </template>
        </el-table-column>
        <el-table-column label="版本号" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ scope.row.code }}
          </template>
        </el-table-column>
        <el-table-column label="应用下载地址url" align="center" min-width="200px">
          <template slot-scope="scope">
            {{ scope.row.url }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="是否强制更新" align="center" min-width="100px">
          <template slot-scope="scope">
            {{ statusList[scope.row.isForced].name}}
          </template>
        </el-table-column> -->
        <!-- <el-table-column fixed="right" label="操作" align="center" min-width="100px">
          <template slot-scope="scope">
            <el-button plain type="primary" size="mini" @click="clickToVersionUpdate(scope.row)">编辑</el-button>
          </template>
        </el-table-column> -->
      </template>
    </table-list>

    <!-- 版本信息编辑 -->
    <el-dialog title="版本信息编辑" :visible.sync="versionVisible" width="550px" @close="versionVisible = false">
      <el-form label-position="right" label-width="140px" :rules="versionRules" :model="versionDetail" ref="versionForm">
        <el-form-item label="应用名：" prop="name">
          <el-input v-model="versionDetail.name" placeholder="请输入应用名" :maxlength="20" size="medium" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="版本号：" prop="code">
          <el-input v-model="versionDetail.code" placeholder="请输入版本号" :maxlength="10" size="medium" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="版本ID：" prop="versionId">
          <el-input-number v-model="versionDetail.versionId" :min="0" :max="9999999" size="medium" :precision="0" style="width:200px"></el-input-number>
        </el-form-item>
        <el-form-item label="应用下载地址url：" prop="url">
          <el-upload
            :limit="1"
            class="upload-demo"
            :action="fileAction"
            :headers="headers"
            :file-list="fileList"
            :on-remove="(file, fileList) => { return handleUploaderRemove(file, fileList) }"
            :on-success="(res, file, fileList) => { return handleUploadSuccess(res, file, fileList) }"
            :before-upload="handleBeforeUpload">
            <el-button size="small" type="primary">点击上传安装包</el-button>
            <div slot="tip" class="el-upload__tip">只能上传apk文件</div>
          </el-upload>
          <div style="word-break: break-all;">{{versionDetail.url}}</div>
        </el-form-item>
        <!-- <el-form-item label="是否强制更新：" prop="isForced">
          <el-checkbox v-model="versionDetail.isForced"></el-checkbox>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="versionVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="insertVersion" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import list from '@/mixins/List'
import table from '@/components/Table'
import { getVersion, insertVersion } from '@/api/versionManage'

export default {
  name: 'versionManage',
  components: {
    'table-list': table
  },
  mixins: [list],
  extends: {},
  props: {},
  data () {
    return {
      versionList: [],
      statusList: [
        {
          name: '不强制',
          value: 0
        },
        {
          name: '强制',
          value: 1
        }
      ],
      versionVisible: false,
      versionDetail: {
        client: 'ANDROID',
        name: '',
        code: '',
        // isForced: '',
        url: '',
        versionId: ''
      },
      versionRules: {
        name: {
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('不能为空'))
            } else if (value.length > 20) {
              callback(new Error('应用名最多20个字'))
            } else {
              callback()
            }
          }
        },
        code: {
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('不能为空'))
            } else if (value.length > 10) {
              callback(new Error('应用名最多10个字符'))
            } else {
              callback()
            }
          }
        },
        versionId: {
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (value === '' || value === undefined) {
              callback(new Error('版本ID不能为空'))
            } else {
              callback()
            }
          }
        },
        url: {
          required: true,
          trigger: 'change',
          validator: (rule, value, callback) => {
            if (!value) {
              callback(new Error('请上传安装包'))
            } else {
              callback()
            }
          }
        }
        // isForced: {
        //   required: false,
        //   trigger: 'change',
        //   validator: (rule, value, callback) => {
        //     callback()
        //   }
        // }
      },
      fileList: [],
      fileAction: `${process.env.VUE_APP_FILE_API}`,
      headers: this.$headers
    }
  },
  computed: {},
  directives: {},
  filters: {},
  created () {},
  mounted () {
    this.getVersionList()
  },
  watch: {},
  methods: {
    async getVersionList () {
      this.versionList = []
      // await this.getVersion('IOS')
      await this.getVersion('ANDROID')
    },
    async getVersion (client) {
      let { data } = await getVersion({
        client
      })
      if (data) {
        this.versionList.push(data)
      }
    },
    async clickToVersionUpdate () {
      let versionDetail = this.versionList[0] || {}
      // this.versionDetail.client = versionDetail.client
      this.versionDetail.name = versionDetail.name
      this.versionDetail.code = versionDetail.code
      this.versionDetail.url = versionDetail.url
      this.versionDetail.versionId = versionDetail.versionId
      // this.versionDetail.isForced = !!versionDetail.isForced
      if (versionDetail.url) {
        this.fileList = [{ url: versionDetail.url }]
      } else {
        this.fileList = []
      }
      this.versionVisible = true
    },
    insertVersion () {
      this.$refs['versionForm'].validate(async (valid) => {
        if (valid) {
          // this.versionDetail.isForced = this.versionDetail.isForced ? 1 : 0
          await insertVersion(this.versionDetail)
          this.getVersionList()
          this.versionVisible = false
          this.$message({
            type: 'success',
            message: '版本编辑成功'
          })
        } else {
          return false
        }
      })
    },
    handleUploaderRemove (file, fileList, activeUploader, index) {
      this.versionDetail.url = ''
    },
    // 商品图片上传成功
    handleUploadSuccess (response, file, fileList, type) {
      this.versionDetail.url = response.data
    },
    handleBeforeUpload (file, uploadStatus) {
      const isIMAGE = file.type === 'application/vnd.android.package-archive'
      // const isLt2M = file.size / 1024 / 1024 < 2
      // 商品图片格式判断
      // if (!isLt2M) {
      //   this.$message.error('上传图片大小必须小于2M')
      //   return false
      // }
      if (!isIMAGE) {
        this.$message.error('只能上传jpg，jpeg，png格式的图片')
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
